<template>
	<view style="background: #f8f8f8;">
		<view class="coupon-item">
			<view class="coupon">
				<text class="amount">￥5</text>
				<view class="info">
					<text class="consume-limit">满50可用</text>
					<text class="expire">有效期到2023-08-24</text>
				</view>
			</view>
			<view class="opt-box">
				<u-button type="primary" text="使用"></u-button>
			</view>	
		</view>	
	</view>	
</template>

<script>
</script>

<style lang="less">
.coupon-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 24rpx;
	padding: 24rpx;
	border-radius: 5px;
	background: #fff;
	
	.coupon {
		display: flex;
		flex-direction: row;
		
		.amount {
			font-size: 24px;
			color: #d43038;	
		}
		
		.info {
			display: flex;
			flex-direction: column;
			margin-left: 10px;
			
			.consume-limit {
				font-size: 14px;
			}
			
			.expire {
				font-size: 12px;
				color: #acacac;
			}
		}
	}
}	
</style>